import React, {useState, useEffect} from "react";


function useCounter(initialCount) {
    const [count, setCount] = useState(initialCount); 
    const [pause, setPause] = useState(false);

    useEffect(() => {
        const timer = setTimeout(() => {
            !pause && setCount(count + 1)
        }, 1000);
        return () => clearTimeout(timer);
    },[count, pause]);

    const reset = () => {
        setCount(initialCount);
    }

    const toggle = () => {
        setPause(!pause);
    }

    return [count, reset, toggle];
}

function TimerHook(){
    const [count1, resetCount1, toggle] = useCounter(10);  
    const [count2] = useCounter(100);  

    return(
        <div>
            <p>TimerHook</p>
            <strong>{count1}</strong>
            <button onClick={resetCount1}>Reset</button>
            <button onClick={toggle}>Toggle</button>
            <p>{count2}</p>
        </div>
    )
}

export default TimerHook;